<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: rgb(152, 208, 189);
        }
        table{
            margin: 0 auto;
            text-align: center;
            background-color: rgb(239, 199, 206);
           
        }
        th{
            font-size: 30px;
        }
        td{
            text-align: left;
            padding-left: 10px;
        }
       
        
    </style>
</head>
<body>
    <table border="1" cellpadding="1" cellspacing="0">
        <tbody>
            <tr>
                <th>名称</th>
                <th>笑话内容</th>
            </tr>
        </tbody>
    </table>

    <script>
       const xhr = new XMLHttpRequest()   //建立一个内置构造函数--xhr
       xhr.open("GET","https://api.gugudata.com/news/joke/demo")  //配置open（请求方式，请求地址）
       xhr.send()                     //发送send
       xhr.onload = function(){      //接收数据，注册一个事件
        if(xhr.status === 200){     //如果status=200 就是ok
            let temp = JSON.parse(xhr.responseText)  //parse把地址里的json字符串转成js对象
            temp.Data.forEach(item => {               //遍历转换的js对象中的data数组里面的数据item
                let tbody = document.querySelector('tbody')  //获取表格元素
                //给表格元素加入写好的表格字符串，表格字符串里，放的是item里我们所需要的值
                tbody.innerHTML +=`    
                <tr>
                    <td>${item.Title}</td>  
                    <td>${item.Content}</td>
                    </tr>
                `;
            })
        }
       }

    </script>
</body>
</html>